<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>00-管网绘图</title>
  <style>
    body {
      background-color: #000;
      text-align: center;
    }

    canvas {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    let canvas = null
    let context = null
    let width = 200
    let height = 200
    let realWidthPre = 0
    window.onload = function () {
      const initCanvasDivId = 'map'
      const initWidth = 800
      const initHeight = 800
      const initParams = [initCanvasDivId, initWidth, initHeight]
      initCanvas(initParams)
      let left = 100

      const data = [
        {
          ground: 4.100,
          liquid: 2.300,

        }
      ]
      const arr = [
        [4.100, 2.100, 1.410, 1.200, 0, -4.000, -5.000, -6.500, -7.000, 86 * 0.077],
        [5.472, 1.170, 1.170, -0.100, 0, -4.000, -5.000, -6.500, -7.000, 44 * 0.077],
        [5.417, 0.990, 0.890, 0.290, 0, -4.000, -5.000, -6.500, -7.000, 30 * 0.077],
        [4.649, 0.950, 0.870, 0.000, 0, -4.000, -5.000, -6.500, -7.000, 18 * 0.077],
        [4.541, 0.110, 0.990, 0.15, 0, -4.000, -5.000, -6.500, -7.000, 36 * 0.077]
      ]
      const maxHeight = 16 + 4
      const maxWidth = 9 + 4
      const paddingHeight = 2
      const paddingWidth = 2

      realWidthPre = maxWidth / initWidth * 1.5

      // // 1. 计算点位1地标坐标。地标坐标1
      // let place1Point1Width = paddingHeight
      // let place1Point1Height = maxHeight - paddingHeight - arr[arr.length - 1] - arr[0]
      // const place1Point1 = [place1Point1Width, place1Point1Height]

      // // 2. 计算点位1水力名义坡降。水力名义坡降1
      // let place1Point2Width = paddingHeight
      // let place1Point2Height = maxHeight - paddingHeight - arr[arr.length - 1] - arr[1]
      // const place1Point2 = [place1Point2Width, place1Point2Height]

      // // 3. 计算点位1液位。液位1
      // let place1Point3Width = paddingHeight
      // let place1Point3Height = maxHeight - paddingHeight - arr[arr.length - 1] - arr[2]
      // const place1Point3 = [place1Point3Width, place1Point3Height]

      // // 4. 计算点位1液位。管底名义坡降1
      // let place1Point4Width = paddingHeight
      // let place1Point4Height = maxHeight - paddingHeight - arr[arr.length - 1] - arr[3]
      // const place1Point4 = [place1Point4Width, place1Point4Height]

      // // 5. 计算点位1管底名义坡降。管底名义坡降1
      // let place1Point5Width = paddingHeight
      // let place1Point5Height = maxHeight - paddingHeight - arr[arr.length - 1] - arr[4]
      // const place1Point5 = [place1Point5Width, place1Point5Width]

      let placePointWidth = paddingWidth
      const places = []
      arr.forEach((item, index) => {
        placePointWidth += item[item.length - 1]
        const points = []
        item.forEach((value, idx) => {
          if (idx < item.length - 1) {
            const placePointHeight = maxHeight - paddingHeight - Math.abs(item[item.length - 2]) - value
            points.push([placePointWidth / realWidthPre, placePointHeight / realWidthPre])
          }
        })
        places.push(points)
      })

      drawHorizontal(places)
      drawVertical(places)
      drawOblique(places)

    }

    /*
    * 绘制横向线
    */
    function drawHorizontal(places) {
      if (!context) {
        return
      }
      places.forEach((item, index) => {
        item.forEach((value, idx) => {
          if (index < places.length -1 && item.length - 1 != idx && idx > 3) {
            context.beginPath()
            context.moveTo(value[0], value[1])
            context.lineTo(places[index+1][idx][0], places[index+1][idx][1])
            if (idx === 4) {
              context.strokeStyle = 'green'
            } else {
              context.strokeStyle = 'black'
            }
            context.stroke()
          }
        })
      })
    }

    /*
    * 绘制纵向线
    */
    function drawVertical(places) {
      if (!context) {
        return
      }
      places.forEach(item => {
        context.beginPath()
        context.moveTo(item[0][0], item[0][1])
        context.lineTo(item[item.length -1][0], item[item.length -1][1])
        context.stroke()
      })
    }

    /*
    * 绘制斜向线
    */
    function drawOblique(places) {
      if (!context) {
        return
      }
      places.forEach((item, index) => {
        item.forEach((value, idx) => {
          if (index < places.length -1 && item.length - 1 != idx && idx < 4) {
            context.beginPath()
            context.moveTo(value[0], value[1])
            context.lineTo(places[index+1][idx][0], places[index+1][idx][1])
            context.stroke()
          }
        })
      })
    }

    /**
     * 初始化canvas 信息
     */
    function initCanvas([canvasDomId, canvasWidth, canvasHeight]) {
      const canvasParent = document.getElementById(canvasDomId)
      if (canvas) {
        canvas.parentNode.removeChild(canvas)
      }
      canvas = document.createElement("canvas")
      canvasParent.appendChild(canvas)
      width = canvasWidth
      height = canvasHeight
      canvas.width = width
      canvas.height = height
      context = canvas.getContext("2d")
    }
  </script>
</body>

</html>